/*
 * @Author: leonard
 * @Date: 2025-01-01 20:20:34
 * @LastEditors: leonard 1287279970@qq.com
 * @LastEditTime: 2025-01-04 02:25:50
 * @FilePath: /amap-admin/src/pages/Home/index.jsx
 * @Description: 
 * 
 * Copyright (c) 2025 by flyray Technology CO., Ltd, All Rights Reserved. 
 */
import React from 'react';
import { Card, Space, Button, Row, Col, Statistic } from 'antd';
import { Link } from 'react-router-dom';
import { 
  DashboardOutlined, 
  EnvironmentOutlined,
  AlertOutlined,
  AreaChartOutlined
} from '@ant-design/icons';
import './index.less';  // 更新样式文件路径

const Home = () => {
  // 示例统计数据
  const statistics = {
    totalSensors: 156,
    onlineSensors: 142,
    alertCount: 3,
    dataPoints: 1280
  };

  return (
    <div className="home-container">
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 统计卡片区域 */}
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card">
              <Statistic 
                title="总传感器数量"
                value={statistics.totalSensors}
                prefix={<DashboardOutlined />}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card success">
              <Statistic 
                title="在线传感器"
                value={statistics.onlineSensors}
                prefix={<AreaChartOutlined />}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card warning">
              <Statistic 
                title="告警数量"
                value={statistics.alertCount}
                prefix={<AlertOutlined />}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card info">
              <Statistic 
                title="今日数据点"
                value={statistics.dataPoints}
                prefix={<AreaChartOutlined />}
              />
            </Card>
          </Col>
        </Row>

        {/* 导航卡片 */}
        <Card title="快速导航" className="nav-card">
          <Row gutter={[16, 16]}>
            <Col xs={24} sm={12} md={6}>
              <Link to="/sensor">
                <Button type="primary" icon={<DashboardOutlined />} block className="nav-button">
                  传感器管理
                </Button>
              </Link>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Link to="/map">
                <Button type="primary" icon={<EnvironmentOutlined />} block className="nav-button">
                  地图展示
                </Button>
              </Link>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Link to="/map-track">
                <Button type="primary" icon={<EnvironmentOutlined />} block className="nav-button">
                  地图轨迹展示
                </Button>
              </Link>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Link to="/alerts">
                <Button type="primary" icon={<AlertOutlined />} block className="nav-button">
                  告警中心
                </Button>
              </Link>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Link to="/analysis">
                <Button type="primary" icon={<AreaChartOutlined />} block className="nav-button">
                  数据分析
                </Button>
              </Link>
            </Col>
          </Row>
        </Card>
      </Space>
    </div>
  );
};

export default Home; 